<template>
  <div class="home">
    <img src="http://www.atguigu.com/images/index_new/logo.png" alt="" />

    <div class="theme-switcher">
      <el-button @click="setTheme('green')" :type="currentTheme === 'green' ? 'primary' : 'default'">绿色主题</el-button>
      <el-button @click="setTheme('gold')" :type="currentTheme === 'gold' ? 'primary' : 'default'">金色主题</el-button>
      <el-button @click="setTheme('purple')" :type="currentTheme === 'purple' ? 'primary' : 'default'">紫色主题</el-button>
    </div>

    <div class="buttons">
      <el-button type="primary">primary</el-button>
      <el-button type="success">success</el-button>
      <el-button type="info">info</el-button>
      <el-button type="danger">danger</el-button>
      <el-button type="warning">warning</el-button>
    </div>

    <div class="alerts">
      <el-alert title="成功提示的文案" type="success" />
      <el-alert title="消息提示的文案" type="info" />
      <el-alert title="警告提示的文案" type="warning" />
      <el-alert title="错误提示的文案" type="error" />
    </div>

    <el-card>
      <div>这是卡片内容</div>
      <el-button type="primary">卡片内的按钮</el-button>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="Home">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElButton, ElAlert, ElCard } from 'element-plus'

const router = useRouter();
const currentTheme = ref('green');

const setTheme = (theme: string) => {
  currentTheme.value = theme;
  const bodyElement = document.body;
  
  // 移除所有主题类
  bodyElement.classList.remove('theme-green', 'theme-gold', 'theme-purple');
  
  // 添加新主题类
  if (theme !== 'green') {
    bodyElement.classList.add(`theme-${theme}`);
  }
};

// onMounted(() => {
//   setTimeout(() => {
//       router.push('/news');
//   }, 3000);
// });
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  height: 100%;
}

.buttons, .alerts, .theme-switcher {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.alerts > div {
  margin-bottom: 10px;
}
</style>